<template>
  <h3>添加轮播图</h3>
  <el-form :model="form" label-width="120px">
    <el-form-item label="图片地址">
      <el-input v-model="form.img" />
    </el-form-item>
    <el-form-item label="图片提示">
      <el-input v-model="form.alt" />
    </el-form-item>
    <el-form-item label="图片连接">
      <el-input v-model="form.link" />
    </el-form-item>
    <el-form-item>
      <el-button :plain="true" @click="onSubmit">上传</el-button>
      <!-- <el-button type="primary" @click="onSubmit">上传</el-button> -->
      <!-- <el-button>取消</el-button> -->
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { reactive } from 'vue'
import { useRouter } from "vue-router"
import service from '../../../utils/service';
// 使用userRouter() 得到路由对象。
const router = useRouter();
const form = reactive({
  img: "",
  alt: "",
  link: ""
})
// console.log("form",form)
const onSubmit = () => {
  if(form.alt&&form.img&&form.link){
    service({
    url: "/banner/add",
    method: "post",
    data: form
  }).then(res => {
    if (res.data.code == 200) {
      // alert("已添加")
      ElMessage({
    message: '恭喜您，亲，您的文件上传成功',
    type: 'success',
  })
  // 跳转到首页
  router.push("/Admin/BannerList");
    }
  })
  }else{
        ElMessage({
                    message: '亲，您还没有添加内容哦！！！',
                    type: 'error',
                })
    }
}
</script>
<style scoped>
.el-button{
background-color: green;
color: white;
}
.el-input{
    width: 500px;
}
</style>